{extend name="common/base"}
{block name="title"}产品列表{/block}
{block name="content"}
<!-- 内容区域 -->
<div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title  am-cf">产品列表</div>


                    </div>
                    <div class="widget-body  am-fr">

                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                            <div class="am-form-group">
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <a href="{:url('create')}" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">

                        </div>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-6">
                            <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                <input type="text" class="am-form-field " name="search">
                                <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search search-btn" type="button"></button>
          </span>
                            </div>
                        </div>

                        <div class="am-u-sm-12">
                            <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                                <thead>
                                <tr>
                                    <th>产品缩略图</th>
                                    <th>价格</th>
                                    <th>佣金</th>
                                    <th>积分</th>
                                    <th>分类</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="ajax-tbody">

                                </tbody>
                            </table>
                        </div>
                        <div class="am-u-lg-12 am-cf">

                            <div class="am-fr ajax-page">
                                {$page}
                                <input type="hidden" name="current_page" value="1">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




{/block}
{block name="footer_js"}
<script>
    $(function () {
        $('#ajax-tbody').on('click' , '.delete' , function ()
        {
            var id = $(this).data('id');
            $('.show_id').html(id);
            $('#my-confirm').modal({
                onConfirm: function() {
                    $.ajax({
                        url : "{:url('destroy')}",
                        data: 'id='+ $('.show_id').html(),
                        success : function (res){
                            ajax();
                        }
                    });
                }
            });
            return false;
        })
    })

</script>
<!--确认删除modal-->
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">Amaze UI</div>
        <div class="am-modal-bd">
            你，确定要删除id为: <span class="show_id"></span> 这条记录吗？
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
<script src="__STATIC__assets/js/template.js"></script>
<script type="text/html" id="ajax-content">
    <%for (var i = 0; i<data.length; i++){%>
    <tr class="gradeX">
        <td>
            <img src="__UPLOAD__thumb/<%=data[i].cover_img%>" class="tpl-table-line-img" alt="">
        </td>
        <td class="am-text-middle">
            <%=data[i].name%>
        </td>
        <td class="am-text-middle"><%=data[i].commission%></td>
        <td class="am-text-middle"><%=data[i].bounds%></td>
        <td class="am-text-middle"><%=data[i].cat_id%></td>
        <td class="am-text-middle">
            <div class="tpl-table-black-operation">
                <a href="javascript:;">
                    <i class="am-icon-pencil"></i> 编辑
                </a>
                <a href="" class="tpl-table-black-operation-del delete" data-id="<%=data[i].id%>">
                    <i class="am-icon-trash"></i> 删除
                </a>
                <a href="{:url('guige')}?id=<%=data[i].id%>">规格管理</a>
            </div>
        </td>
    </tr>
    <%}%>
</script>
<script>
    // ajax 分页
    // 1。 先让a链接不能跳转
    $('.ajax-page').on('click' , 'a' , function(){
    // $('.am-fr a').click(function () {
        // console.log($(this).attr('href'))
        var _this = $(this);
        ajax(_this.attr('href'));

        return false;
    });

function ajax (url) {
    var config = {
        success : function (res) {
            tpl(res)
        }
    };
    if (url) {
        config.url = url;
    }else{
       config.data = 'page='+$('input[name=current_page]').val();
    }
    $.ajax(config);
}
    ajax();

$('.search-btn').click(function () {
    var search = $('[name=search]').val();
    $.ajax({
        url : "{url('index')}",
        data : 'search='+search,
        success : function (res) {
            tpl(res)
        }
    })
})
    $('[name=search]').keydown(function(e){
        if (e.which == 13) {
            $('.search-btn').click();
        }
    });
    
    function tpl(res) {
        var html = template(document.getElementById('ajax-content').innerHTML , {'data':res.product_list.data});
        $('#ajax-tbody').html(html);
        $('.ajax-page').html(res.page)
        $('.ajax-page').append('<input type="hidden" name="current_page" value="'+res.current_page+'">');
    }
</script>
{/block}